{% extends "stories/base.html" %}
{% load i18n %}
{% load media_tags %}
{% load inlines %}
{% block head_title %}Story: {{ story.headline }}{% endblock %}


{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ MEDIA_URL }}css/pages.css" />
    <link rel="stylesheet" href="{{ MEDIA_URL }}common/page_layouts.css" />
    <script type="text/javascript" src="{{ MEDIA_URL }}js/pages.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}common/js/swfobject.js"></script>
    <script type="text/javascript">
        var page_layout_list_url = "{% url page_layout_list_json %}?width=750&height=500";
        var page_text_editor_url = "{% url stories_page_templates "text_editor" %}?width=750&height=500";
        var page_media_list_url = "{% url stories_page_templates "media_list" %}?width=750&height=500";
        var page_media_source_url = "{% url stories_story_media story.id %}";
    </script>
{% endblock %}


{% block subnav-outer %}{% endblock %}

{% block main_content %}

<h1>{{ story.headline }}</h1>

<ul class="action-links">
    <li>
        <a href="{% url stories_page_templates "page_template" %}" 
           id="add-story-page" title="{% trans "Add a new page" %}"
           >{% trans "Add new page" %}</a>
    </li>
    <li>
        <a href="{% url stories_page_templates "page_template" %}" 
           id="add-layout" title="{% trans "Add a layout" %}"
           >{% trans "Add layout" %}</a>
    </li>
    <li>
        <a href="{% url stories_page_templates "page_template" %}" 
           id="clear-page" title="{% trans "Clear page" %}"
           >{% trans "Clear page" %}</a>
    </li>
    <li>
        <a href="{% url stories_page_templates "page_template" %}" 
           id="remove-page" title="{% trans "Remove page" %}"
           >{% trans "Remove page" %}</a>
    </li>
    <li class="story-submit-buttons">
        <span class="save-pages-sucess">All pages were saved sucessfully</span>
        <button class="story-save-pages">Save all pages</button>
        <img class="ajax-loader-gif" src="{{ MEDIA_URL }}images/ajax/ajax-loader.gif" />
    </li>
</ul>
<br class="clear" />

<div class="edit-story-tabs">
    <div class="tab-links">
        <a href="{% url stories_edit_story story.id %}" rel="story-info" style="color: #888;">Properties</a>
        <a href="{% url stories_story_media story.id %}" rel="story-media" style="color: #888;">Media</a>
        <a href="{% url stories_story_add_edit_point story.id %}" rel="story-media" style="color: #888;">Geotag</a>
        {% for page in story.pages %}
        <a href="" rel="story-content-{{ page.pagenum }}" class="{% if forloop.first %}active{% endif %} page_nav">Page {{ page.pagenum }}</a>
        {% endfor %}
        <br class="clearboth" />
    </div>
    <div class="tab-contents clearfix container_12">
    {% for page in story.pages %}
        <div id="story-content-{{ page.pagenum }}" class="tab {% if not forloop.first %}hidden{% endif %}">
            {% process_inlines page.content %}
        </div>
    {% endfor %}
    </div>
</div>
<div class="story-submit-buttons">
    <button class="story-save-pages">Save all pages</button>
</div>
<div id="story-prepare" class="hidden"></div>
<form id="save-page-form" class="hidden" method="post" action="{% url stories_save_page story.id %}">
    {{ page_formset }}
</form>
{% endblock %}
